import React from 'react'
import Helmet from 'react-helmet'
import { Link, withPrefix } from 'gatsby-link'
import '../assets/sass/main.scss'
import NavHeader from '../components/NavHeader'
import Nav from '../components/Nav'
import Header from '../components/Header'
import Menu from '../components/Menu'
import Footer from '../components/Footer'
import bg01 from '../assets/images/bg01.jpg'
import styles from '../assets/sass/pages/login/main.scss';
class Template extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            isMenuVisible: false,
            loading: 'is-loading',
            navSize: -1,
            settings: {
                visible:['visible top','',''],
                top:['','',''],
                delay: 6000
            }
        }
    }
    componentDidMount() {
        this.timeoutId = setTimeout(() => {
            this.setState({ loading: '' });
        }, 100);
       this.bgHander();
    }
    bgHander() {
        var settings={
            delay: 6000
        }
        let pos=0;
        let lastPos=0;
        let $bgs=[];
        const $bg1 = document.getElementById('bg1');
        const $bg2 = document.getElementById('bg2');
        const $bg3 = document.getElementById('bg3');
        window.canUse = function (p) { if (!window._canUse) window._canUse = document.createElement("div"); var e = window._canUse.style, up = p.charAt(0).toUpperCase() + p.slice(1); return p in e || "Moz" + up in e || "Webkit" + up in e || "O" + up in e || "ms" + up in e };
        $bgs.push($bg1);
        $bgs.push($bg2);
        $bgs.push($bg3);
        $bgs[pos].classList.add('visible');
        $bgs[pos].classList.add('top');

        // Bail if we only have a single BG or the client doesn't support transitions.
        if ($bgs.length == 1
            || !canUse('transition'))
            return;
        window.setInterval(function () {

            lastPos = pos;
            pos++;
            // Wrap to beginning if necessary.
            if (pos >= $bgs.length)
                pos = 0;
            // Swap top images.
            $bgs[lastPos].classList.remove('top');
            $bgs[pos].classList.add('visible');
            $bgs[pos].classList.add('top');

            // Hide last image after a short delay.
            window.setTimeout(function () {
                $bgs[lastPos].classList.remove('visible');
            }, settings.delay / 2);

        }, settings.delay);
    }
    componentWillUnmount() {
        if (this.timeoutId) {
            clearTimeout(this.timeoutId);
        }
        if (this.bgTimeoutId) {
            clearTimeout(this.bgTimeoutId);
        }
    }

    render() {
        const { children } = this.props
        const bgStyles={
            backgroundPosition:`center center`,
        }
        return (
            <div id="login">
                <Helmet>
                    <title>Eventually by HTML5 UP</title>
                    <meta charset="utf-8" />
                    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
                </Helmet>
                <header id="login-header">
                    <h1>Eventually</h1>
                    <p>A simple template for telling the world when you'll launch<br />
                        your next big thing. Brought to you by <a href="http://html5up.net">HTML5 UP</a>.</p>
                </header>
                {children()}
                <footer id="login-footer">
                    <ul className="icons">
                        <li><a href="#" className="icon fa-twitter"><span className="label">Twitter</span></a></li>
                        <li><a href="#" className="icon fa-instagram"><span className="label">Instagram</span></a></li>
                        <li><a href="#" className="icon fa-github"><span className="label">GitHub</span></a></li>
                        <li><a href="#" className="icon fa-envelope-o"><span className="label">Email</span></a></li>
                    </ul>
                    <ul className="copyright">
                        <li>&copy; Untitled.</li><li>Credits: <a href="http://html5up.net">HTML5 UP</a></li>
                    </ul>
                </footer>
                <div id="login-bg">
                <div id="bg1" style={{...bgStyles,background:`url(${require("../assets/images/bg01.jpg")})`}}></div>
                <div id="bg2" style={{...bgStyles,background:`url(${require("../assets/images/bg02.jpg")})`}}></div>
                <div id="bg3" style={{...bgStyles,background:`url(${require("../assets/images/bg03.jpg")})`}}></div>
                </div>
            </div>
        )
    }
}

Template.propTypes = {
    children: React.PropTypes.func
}

export default Template
